<script setup>
import Icon from '@/components/Icon/IconMain.vue'
</script>

<template>
  <div class="icon-container">
    <!-- 图标列表 -->
    <div class="icon-list">
      <div class="icon-item">
        <Icon icon="fa-solid fa-info-circle" type="info" size="2x" />
      </div>
      <div class="icon-item">
        <Icon icon="fa-solid fa-exclamation-triangle" type="warning" size="2x" />
      </div>
      <div class="icon-item">
        <Icon icon="fa-solid fa-times-circle" type="danger" size="2x" />
      </div>
      <div class="icon-item">
        <Icon icon="fa-solid fa-check-circle" type="success" size="2x" />
      </div>
      <div class="icon-item">
        <Icon icon="fa-solid fa-question-circle" type="primary" size="2x" />
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 容器样式 */
.icon-container {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 图标列表样式 */
.icon-list {
  display: flex; /* 水平排列 */
  align-items: center; /* 垂直居中对齐 */
  gap: 20px; /* 设置图标之间的间距 */
}

/* 单个图标项样式 */
.icon-item {
  display: flex;
  justify-content: center; /* 水平居中对齐 */
  align-items: center; /* 垂直居中对齐 */
}
</style>